<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
	<title>触摸事件</title>
	<style type="text/css">
		body{
			margin: 0;
			padding: 0;
		}
		.box{
			width: 200px;
			height: 200px;
			background: pink;
			float: left;
		}
	</style>
</head>
<body>
<div class="box"></div>
<script type="text/javascript">
//window.onload 加载完之后执行
window.onload = function () {
	var box = document.querySelector('.box');
	var width = box.offsetWidth;
	var startX;
	var startY;
	var translateX = 0;
    var translateY = 0;
	box.addEventListener('touchstart',function (e) {
		startX = e.touches[0].clientX;
		startY = e.touches[0].clientY;
		
	});
	box.addEventListener('touchmove',function (e) {
		var moveX = e.touches[0].clientX;
		var moveY = e.touches[0].clientY;
        /*计算位移  有正负方向*/
        distanceX = moveX - startX;
        distanceY = moveY - startY;
        /*计算目标元素的位移  不用管正负*/
        /*元素将要的定位=当前定位+手指移动的距离*/
        // var translateX = -index * width + distanceX;
        // var translateX = width + distanceX
        // 判断是否滑动，第二次滑动时再计算translateX += distanceX
        translateX>0? (translateX += distanceX):distanceX;
        translateY>0? (translateY += distanceY):distanceY;
        
        
        /*滑动--->元素随着手指的滑动做位置的改变*/
        // removeTransition();
        // box.style.transform = 'translateX(' + translateX + 'px)';
        // box.style.webkitTransform = 'translateX(' + translateX + 'px)';

        box.style.transform = 'translate(' + translateX + 'px,'+translateY+'px)';
        box.style.webkitTransform = 'translate(' + translateX + 'px,'+translateY+'px)';
        // setTranslateX(translateX);
        // isMove = true;
		console.log('touchmove');
		// console.log(e);
	});
	box.addEventListener('touchend',function (e) {
		// box.style.transition = 'none';
  //       box.style.webkitTransition = 'none';
        
		console.log('touchend');
		console.log(translateX);
		console.log(box.style.transform);
	});
	box.addEventListener('click',function (e) {
		console.log('click');
		console.log(e);
	});
}

</script>
</body>
</html>